<template>
  <div class="buttonBar">
    <div class="checkContent">
      <check-button :isChecked="isSelectAll" class="checkButton" @click.native="checkClick"></check-button>
      <span>全选</span>
    </div>

    <div class="totalPrice">
      合计：{{totalPrice}}
    </div>

    <div class="calculate" @click="calcClick">
      去计算({{checkLength}})
    </div>
  </div>
</template>

<script>
import CheckButton from '@/components/content/checkButton/CheckButton.vue'

export default {
  components: { CheckButton },
  name: "CartButtonBar",
  computed: {
    totalPrice() { //计算总价格，获取cartList中的商品进行过滤，过滤出checked为true的，再用reduce进行累加
      return "￥" + this.$store.state.cartList.filter(item => {
        return item.checked
      }).reduce((preValue,item) => {
        return preValue + item.price * item.count
      },0).toFixed(2)
    },
    checkLength() { //计算选中商品的数量
      return this.$store.state.cartList.filter(item => {
        return item.checked
      }).length
    },
    isSelectAll() {
      // 初始进入页面，购物车为空时，全选按钮不选中
      if(this.$store.state.cartList.length === 0) return false

      // 方法一：筛选，cartList中没有被选中的有长度的话，则为false
      // return !(this.$store.state.cartList.filter(item => !item.checked).length)

      // 方法二：若发现有未选中的，则为false
      // return !this.$store.state.cartList.find(item => !item.checked)

      // 方法三：若发现有未选中的，则直接为false
      return !this.$store.state.cartList.some(item => !item.checked)

      // 方法四：每一个都选中，则为true
      // return this.$store.state.cartList.every(item => item.checked)

      // 方法五：
      // for (const item of this.$store.state.cartList) {
      //   // 若遍历到有未选中的，则直接为false
      //   if(!item.checked) {
      //     return false
      //   }
      // }
      // // 遍历完了都没发现，则为true
      // return true
    }
  },
  methods: {
    checkClick() {
      if(this.isSelectAll) { //若全部被选中，则点击全选按钮则全部取消
        this.$store.state.cartList.forEach(item => item.checked = false);
      } else { //若有部分或没有被选中，则点击全选按钮则全部选中
        this.$store.state.cartList.forEach(item => item.checked = true);
      }
    },
    calcClick() {
      if(!this.isSelectAll) {
        this.$toast.show('请选择购买的商品',1500)
      }
    }
  }
}
</script>

<style scoped>
  .buttonBar {
    position: relative;
    display: flex;
    height: 40px;
    background-color: #eee;
    line-height: 40px;
    font-size: 15px;
  }

  .checkButton {
      width: 20px;
      height: 20px;
      line-height: 20px;
      margin-right: 8px;
  }

  .checkContent {
    display: flex;
    width: 66px;
    align-items: center;
    margin-left: 10px;
  }

  .totalPrice {
    margin-left: 30px;
    flex: 1;
    font-weight: 700;
  }

  .calculate {
    width: 100px;
    background-color: orangered;
    text-align: center;
    color: #fff;
  }
</style>
